<!-- 聊天列表 -->
<template>
  <div class="msglist">
    <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="个人聊天" name="1">
            <ul class="msg">
                <li v-for="item in searchedChatlist" style="padding: 10px" :class="{ active: item.id === selectId }" @click="selectChatItem(item)" :key="item.id">
                    <el-badge :is-dot="item.newMessage" class="sessionlist">
                        <div class="list-left">
                            <img class="avatar"  width="42" height="42" style="display: block" :alt="item.user.name" :src="'http://im.wzhwgg.com:8070/wechatwebsite/images/default.png'">
                            <!-- <img class="avatar"  width="42" height="42" style="display: block" :alt="item.user.name" :src="'http://m.hhkj-life.com/wechatwebsite/' + item.user.img"> -->
                        </div>
                        <div class="list-right">
                            <p class="name">{{item.user.name}}</p>
                            <span class="time">{{item.messages[item.messages.length-1].date | time}}</span>
                            <p class="lastmsg" v-html="item.messages[item.messages.length-1].content">{{item.messages[item.messages.length-1].content}}</p>
                        </div>
                    </el-badge>
                </li>
            </ul>
        </el-tab-pane>
        <el-tab-pane label="群聊" name="2">
            <ul class="msg">
                <li v-for="item in chatGrouplist" style="padding: 10px" :class="{ active: item.id === selectGroupId }" @click="selectGroupChatItem(item)" :key="item.id">
                    <el-badge :is-dot="item.newMessage" class="sessionlist">
                        <div class="list-left">
                            <img class="avatar"  width="42" height="42" style="display: block" :src="'http://im.wzhwgg.com:8070/wechatwebsite/images/default.png'">
                        </div>
                        <div class="list-right">
                            <p class="name">{{item.groupName}}</p>
                        </div>
                    </el-badge>
                </li>
            </ul>
        </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
    data() {
        return {
            activeName: '1',
        }
    },
    computed: {
   	    ...mapState([
            'selectId',
            'searchText',
            'user',
            'chatGrouplist',
            'selectGroupId'
        ]),
        ...mapGetters([
            'searchedChatlist'
        ])
    },
    created() {
        // this.fetchmsgBox()
        console.log(this.searchedChatlist);
        this.fetchGroupChatlist()
    },
    methods: {
    	...mapActions([
             'selectSession',
             'selectGroupSession',
        ]),
        selectChatItem(data) {
            // this.fetchMsgList()
            this.$emit('open')
            this.selectSession(data)
            this.readAllMessages()
        },
        selectGroupChatItem(data) {
            // this.fetchMsgList()
            this.$emit('open')
            this.selectGroupSession(data)
            this.readAllMessages()
        },
        readAllMessages() {
			boundAsync.callback(2, null).then(function (actualResult)
			{
				const expectedResult = true;
				assert.equal(expectedResult, actualResult, "notify client is " + expectedResult);
			});
		},
        fetchMsgList() {
            let params =  new FormData()
            params.append('id', this.user.memberId)
            params.append('type', 'member')
            params.append('pageNum', 1)
            params.append('pageSize', 10)
            // let params = {
            //     id: this.user.memberId,
            //     type: 'member',
            //     pageNum: 1,
            //     pageSize: 10
            // }
            this.$http.post('/api/mMessage/getHistoryMessage.do', params)
        },
        fetchmsgBox() {
            let params =  new FormData()
            params.append('memberId', this.user.memberId)
            // params.append('id', this.user.memberId)
            // params.append('type', 'member')
            // params.append('pageNum', 1)
            // params.append('pageSize', 10)
            this.$http.post('/api/mMessage/msgBoxPage.do', params)
        },
        async fetchGroupChatlist() {
            const { data } = await this.$http.get(`/api/groupMessage/getGroupByUserId.do?memberId=${this.user.memberId}`)
            this.$store.dispatch('groupList', data.object)
        },
        handleClick(tab,e) {
            this.$store.dispatch('chatType', tab.name)
        },
    },
    filters: {
            // 将日期过滤为 hour:minutes
            time (date) {
                if (typeof date === 'string') {
                    date = new Date(date);
                }
                if(date.getMinutes()<10){
                  return date.getHours() + ':0' +date.getMinutes();
                }else{
                  return date.getHours() + ':' + date.getMinutes();
                }
            }
    },
}
</script>

<style lang="stylus" scoped>
.msglist
  overflow-y: scroll
  height: 100%
  .sessionlist
    display: flex
    padding: 12px
    transition: background-color .1s
    font-size: 0
    &:hover
        background-color: rgb(220,220,220)
    &.active
        background-color: #c4c4c4
    .avatar
        border-radius: 2px
        margin-right: 12px
    .list-right
        position: relative
        flex: 1
        margin-top: 4px
	    .name
	        display: inline-block
	        vertical-align: top
	        font-size: 14px
	    .time
	        float: right
	        color: #999
	        font-size: 10px
	        vertical-align: top
        .lastmsg
            position: absolute
            font-size: 12px
            width: 130px
            height: 15px
            line-height: 15px
            color: #999
            bottom: 4px
            overflow: hidden
            white-space:nowrap
            text-overflow:ellipsis
</style>
<style>
    .el-tabs__header {
        padding: 0 20px !important;
    }
</style>

